<template>
  
  <div class="login-container">
    <img src="/login-pic2.png" alt="login" class="login-image"/>
    <div class="login-form">
    <div class="login-form-title">
        <span class="title-gradient">旅游后台登录</span>
        </div>
    <el-form 
      :model="loginForm" 
      :rules="rules" 
      ref="loginFormRef" 
      label-width="80px" 
      @submit.prevent="handleLogin"
    >
      <el-form-item label="用户名" prop="username">
        <el-input 
          v-model="loginForm.username" 
          placeholder="请输入用户名" 
        />
      </el-form-item>
      
      <el-form-item label="密码" prop="password">
        <el-input 
          v-model="loginForm.password" 
          type="password" 
          placeholder="请输入密码" 
          show-password
        />
      </el-form-item>
      
      <el-form-item>
        <el-button 
          type="primary" 
          @click="handleLogin" 
          :loading="loading"
        >
          {{ loading ? '登录中...' : '登录' }}
        </el-button>
      </el-form-item>
    </el-form>
    
   
  </div>
  </div>
  <!-- 海浪背景 -->
<div class="ocean-background">
  <!-- 渐变叠加层 -->
  <div class="gradient-overlay"></div>
  
  <!-- 波浪容器 -->
  <div class="wave-container">
    <!-- 最深层波浪 -->
    <svg class="wave-layer wave-deepest" viewBox="0 0 2880 320" preserveAspectRatio="none">
      <path fill="#1a5fb4" fill-opacity="0.2" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1440,165.3C1536,149,1632,171,1728,186.7C1824,203,1920,213,2016,213.3C2112,213,2208,203,2304,170.7C2400,139,2496,85,2592,96C2688,107,2784,181,2832,218.7L2880,256L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
        <animate attributeName="d" 
          values="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1440,165.3C1536,149,1632,171,1728,186.7C1824,203,1920,213,2016,213.3C2112,213,2208,203,2304,170.7C2400,139,2496,85,2592,96C2688,107,2784,181,2832,218.7L2880,256L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
                  M0,160L48,170.7C96,181,192,203,288,213.3C384,224,480,224,576,202.7C672,181,768,139,864,133.3C960,128,1056,159,1152,176C1248,192,1344,192,1440,176C1536,160,1632,128,1728,133.3C1824,139,1920,181,2016,192C2112,203,2208,181,2304,165.3C2400,149,2496,139,2592,149.3C2688,160,2784,181,2832,192L2880,203L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
                  M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1440,165.3C1536,149,1632,171,1728,186.7C1824,203,1920,213,2016,213.3C2112,213,2208,203,2304,170.7C2400,139,2496,85,2592,96C2688,107,2784,181,2832,218.7L2880,256L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
          dur="25s" 
          repeatCount="indefinite"/>
      </path>
    </svg>
    
    <!-- 背景层波浪 -->
    <svg class="wave-layer wave-back" viewBox="0 0 2880 320" preserveAspectRatio="none">
      <path fill="#2e76c3" fill-opacity="0.3" d="M0,160L48,170.7C96,181,192,203,288,213.3C384,224,480,224,576,202.7C672,181,768,139,864,133.3C960,128,1056,159,1152,176C1248,192,1344,192,1440,176C1536,160,1632,128,1728,133.3C1824,139,1920,181,2016,192C2112,203,2208,181,2304,165.3C2400,149,2496,139,2592,149.3C2688,160,2784,181,2832,192L2880,203L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
        <animate attributeName="d" 
          values="M0,160L48,170.7C96,181,192,203,288,213.3C384,224,480,224,576,202.7C672,181,768,139,864,133.3C960,128,1056,159,1152,176C1248,192,1344,192,1440,176C1536,160,1632,128,1728,133.3C1824,139,1920,181,2016,192C2112,203,2208,181,2304,165.3C2400,149,2496,139,2592,149.3C2688,160,2784,181,2832,192L2880,203L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
                  M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1440,165.3C1536,149,1632,171,1728,186.7C1824,203,1920,213,2016,213.3C2112,213,2208,203,2304,170.7C2400,139,2496,85,2592,96C2688,107,2784,181,2832,218.7L2880,256L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
                  M0,160L48,170.7C96,181,192,203,288,213.3C384,224,480,224,576,202.7C672,181,768,139,864,133.3C960,128,1056,159,1152,176C1248,192,1344,192,1440,176C1536,160,1632,128,1728,133.3C1824,139,1920,181,2016,192C2112,203,2208,181,2304,165.3C2400,149,2496,139,2592,149.3C2688,160,2784,181,2832,192L2880,203L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
          dur="20s" 
          repeatCount="indefinite"/>
      </path>
    </svg>
    
    <!-- 中层波浪 -->
    <svg class="wave-layer wave-mid" viewBox="0 0 2880 320" preserveAspectRatio="none">
      <path fill="#428bca" fill-opacity="0.4" d="M0,224L48,218.7C96,213,192,203,288,186.7C384,171,480,149,576,160C672,171,768,213,864,213.3C960,213,1056,171,1152,160C1248,149,1344,171,1440,186.7C1536,203,1632,213,1728,208C1824,203,1920,181,2016,176C2112,171,2208,181,2304,192C2400,203,2496,213,2592,208C2688,203,2784,181,2832,170.7L2880,160L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
        <animate attributeName="d" 
          values="M0,224L48,218.7C96,213,192,203,288,186.7C384,171,480,149,576,160C672,171,768,213,864,213.3C960,213,1056,171,1152,160C1248,149,1344,171,1440,186.7C1536,203,1632,213,1728,208C1824,203,1920,181,2016,176C2112,171,2208,181,2304,192C2400,203,2496,213,2592,208C2688,203,2784,181,2832,170.7L2880,160L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
                  M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1440,165.3C1536,149,1632,171,1728,186.7C1824,203,1920,213,2016,213.3C2112,213,2208,203,2304,170.7C2400,139,2496,85,2592,96C2688,107,2784,181,2832,218.7L2880,256L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
                  M0,224L48,218.7C96,213,192,203,288,186.7C384,171,480,149,576,160C672,171,768,213,864,213.3C960,213,1056,171,1152,160C1248,149,1344,171,1440,186.7C1536,203,1632,213,1728,208C1824,203,1920,181,2016,176C2112,171,2208,181,2304,192C2400,203,2496,213,2592,208C2688,203,2784,181,2832,170.7L2880,160L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
          dur="15s" 
          repeatCount="indefinite"/>
      </path>
    </svg>
    
    <!-- 前层波浪 -->
    <svg class="wave-layer wave-front" viewBox="0 0 2880 320" preserveAspectRatio="none">
      <path fill="#88c1e5" fill-opacity="0.6" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1440,165.3C1536,149,1632,171,1728,186.7C1824,203,1920,213,2016,213.3C2112,213,2208,203,2304,170.7C2400,139,2496,85,2592,96C2688,107,2784,181,2832,218.7L2880,256L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
        <animate attributeName="d" 
          values="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1440,165.3C1536,149,1632,171,1728,186.7C1824,203,1920,213,2016,213.3C2112,213,2208,203,2304,170.7C2400,139,2496,85,2592,96C2688,107,2784,181,2832,218.7L2880,256L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
                  M0,160L48,170.7C96,181,192,203,288,213.3C384,224,480,224,576,202.7C672,181,768,139,864,133.3C960,128,1056,159,1152,176C1248,192,1344,192,1440,176C1536,160,1632,128,1728,133.3C1824,139,1920,181,2016,192C2112,203,2208,181,2304,165.3C2400,149,2496,139,2592,149.3C2688,160,2784,181,2832,192L2880,203L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
                  M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1440,165.3C1536,149,1632,171,1728,186.7C1824,203,1920,213,2016,213.3C2112,213,2208,203,2304,170.7C2400,139,2496,85,2592,96C2688,107,2784,181,2832,218.7L2880,256L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
          dur="10s" 
          repeatCount="indefinite"/>
      </path>
    </svg>
    
    <!-- 表面波浪 -->
    <svg class="wave-layer wave-surface" viewBox="0 0 2880 320" preserveAspectRatio="none">
      <path fill="#d2e9fe" fill-opacity="0.8" d="M0,160L48,170.7C96,181,192,203,288,213.3C384,224,480,224,576,202.7C672,181,768,139,864,133.3C960,128,1056,159,1152,176C1248,192,1344,192,1440,176C1536,160,1632,128,1728,133.3C1824,139,1920,181,2016,192C2112,203,2208,181,2304,165.3C2400,149,2496,139,2592,149.3C2688,160,2784,181,2832,192L2880,203L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
        <animate attributeName="d" 
          values="M0,160L48,170.7C96,181,192,203,288,213.3C384,224,480,224,576,202.7C672,181,768,139,864,133.3C960,128,1056,159,1152,176C1248,192,1344,192,1440,176C1536,160,1632,128,1728,133.3C1824,139,1920,181,2016,192C2112,203,2208,181,2304,165.3C2400,149,2496,139,2592,149.3C2688,160,2784,181,2832,192L2880,203L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
                  M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1440,165.3C1536,149,1632,171,1728,186.7C1824,203,1920,213,2016,213.3C2112,213,2208,203,2304,170.7C2400,139,2496,85,2592,96C2688,107,2784,181,2832,218.7L2880,256L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
                  M0,160L48,170.7C96,181,192,203,288,213.3C384,224,480,224,576,202.7C672,181,768,139,864,133.3C960,128,1056,159,1152,176C1248,192,1344,192,1440,176C1536,160,1632,128,1728,133.3C1824,139,1920,181,2016,192C2112,203,2208,181,2304,165.3C2400,149,2496,139,2592,149.3C2688,160,2784,181,2832,192L2880,203L2880,320L2832,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
          dur="8s" 
          repeatCount="indefinite"/>
      </path>
    </svg>
  </div>
</div>

</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import { ElMessage } from 'element-plus'

const authStore = useAuthStore()
const router = useRouter()

// 表单数据
const loginForm = reactive({
  username: '',
  password: ''
})

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码至少6个字符', trigger: 'blur' }
  ]
}

// 状态
const loading = ref(false)
const errorMessage = ref('')
const loginFormRef = ref(null)

// 处理登录
const handleLogin = async () => {
  if (!loginFormRef.value) return
  
  // 表单验证
  await loginFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      errorMessage.value = ''
      
      try {
          // 调用认证store的登录方法
          const result = await authStore.login(loginForm)
          
          if (result.success) {
            ElMessage.success('登录成功')
            // 登录成功后跳转到首页或其他页面
            router.push('/')
          } else {
            errorMessage.value = result.error
            ElMessage.error(result.error)
          }
        } catch (error) {
          console.error('Login error:', error)
          errorMessage.value = error.response?.data?.message || '登录失败，请检查用户名和密码'
          ElMessage.error(errorMessage.value)
        } finally {
          loading.value = false
        }
    }
  })
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  padding: 10rem 0;
  max-width: 1000px;
  margin: auto;
}
.login-form-title{
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}


.login-image {
  flex: 1;
  min-width: 0;
  max-width: 50%;
  height: auto;
  object-fit: cover;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-form {
  flex: 1;
  min-width: 0;
  max-width: 30%;
  padding: 40px;
  border: 1px solid #eaeaea;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #ffffff;
}

/* 海浪背景样式 */
.ocean-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #1a5fb4, #2e9afe, #5ab1f3, #a3d5f7);
  z-index: -1;
  overflow: hidden;
}

.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%; /* 超出屏幕宽度以避免边缘问题 */
  height: 100%;
  animation: wave-move 20s linear infinite;
}

.wave-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wave-deepest {
  animation: wave-animation 25s linear infinite;
}

.wave-back {
  animation: wave-animation 20s linear infinite;
}

.wave-mid {
  animation: wave-animation 15s linear infinite;
}

.wave-front {
  animation: wave-animation 10s linear infinite;
}

.wave-surface {
  animation: wave-animation 8s linear infinite;
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(26, 95, 180, 0.4), rgba(46, 154, 254, 0.3), rgba(90, 177, 243, 0.2), rgba(163, 213, 247, 0.1));
}

@keyframes wave-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes wave-animation {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(-100px) translateY(-10px);
  }
  50% {
    transform: translateX(-200px) translateY(0);
  }
  75% {
    transform: translateX(-100px) translateY(10px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

 

/* 响应式设计，在小屏幕上恢复上下布局 */
@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
    gap: 20px;
  }
  
  .login-image {
    width: 80%;
    max-width: 400px;
  }
}
/* 自定义登录表单输入框样式 */
.login-form :deep(.el-input__wrapper) {
  --el-input-focus-border-color: #909399;
  --el-input-hover-border-color: #c0c4cc;
  border-radius: 4px;
}

/* 输入框聚焦时的样式 */
.login-form :deep(.el-input__wrapper.is-focus) {
  border-color: #909399 !important;
  box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.2) !important;
}

/* 输入框悬浮时的样式 */
.login-form :deep(.el-input__wrapper:hover) {
  border-color: #c0c4cc !important;
}

/*  浏览器自动存储密码的样式*/
/* 针对WebKit浏览器（Chrome、Safari等）的自动填充样式 */
.login-form :deep(.el-input__wrapper input:-webkit-autofill) {
  /* 覆盖默认的黄色背景 */
  -webkit-box-shadow: 0 0 0 100px #fff inset !important;
  -webkit-text-fill-color: #333 !important;
}

/* 针对Firefox的自动填充样式 */
.login-form :deep(.el-input__wrapper input:-moz-autofill) {
  background-color: #fff !important;
  color: #333 !important;
}

/* 确保自动填充状态下的输入框边框与我们的自定义样式保持一致 */
.login-form :deep(.el-input__wrapper.is-focus input:-webkit-autofill),
.login-form :deep(.el-input__wrapper.is-focus input:-moz-autofill) {
  border-color: #909399 !important;
  box-shadow: 0 0 0 2px rgba(144, 147, 153, 0.2) !important;
}

</style>